<template>
  <div id="markdown-wrap">
    <div :id="randomID"></div>
    <!-- <beat-loader :color="'#37cbf1'" :num="7" :size="10" v-if="jsLoading"></beat-loader> -->
  </div>
</template>
<script>
import { loadScript } from "@/utils/async-js";
// import beatLoader from '@/components/beatLoader'
export default {
  components: {
    // beatLoader
  },
  props: ["content"],
  data: function() {
    return {
      jsLoading: false,
      randomID: `markdown-wrap${Math.round(Math.random() * 100000)}`,
      editorMdLoaded: false
    };
  },
  watch: {
    content: {
      handler() {
        this.analysisMarkdown();
      },
      deep: true
    }
  },
  mounted() {
    let sources = ["/static/markdown-depends.min.js"];
    if (!this.editorMdLoaded) {
      this.jsLoading = true;
      loadScript(sources, () => {
        this.jsLoading = false;
        this.editorMdLoaded = true;
        this.analysisMarkdown();
      });
    } else {
      this.analysisMarkdown();
    }
  },
  methods: {
    analysisMarkdown: function() {
      let mdContent = this.content;
      /* eslint-disable-next-line */
      $(`#${this.randomID}`).html("");
      /* eslint-disable-next-line */
      editormd.markdownToHTML(this.randomID, {
        markdown: mdContent,
        htmlDecode: "style,script,iframe",
        emoji: true,
        taskList: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析
        codeFold: true
      });
    }
  }
};
</script>
<style lang="scss">
@import "/static/editormd.preview-custome.css";
</style>


